import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== antd
const Image 			=  	$Lazy.load(()=>import('@antd/image'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: []
	}

	// 表格
	cols=[
		{ title: '条码信息', 	dataIndex: 'spec_code',	...$fn.table.spec_code,	 },
		TableControls.controls.call(this,{ width: 200 })
	]

	// 表格操作按钮
	table_controls = (text,{ spec_code, uuid, app_upload_pic }) => {
		return [
			TableControls.click.call(this, '查看', ()=>{ 
				this.setState({ img: $fn.getImagePrefix(app_upload_pic) })
			}, { disabled: !app_upload_pic }),
			// 上传
			TableControls.upload.call(this, value => {
				$http.submit(this,'specimen/upload',{ param: {file:value,spec_code} }).then(res=>{
					$fn.msg.success('上传图片成功')
					const { data } = this.state
					if (value) {
						// 将图片写入当前的 条码中
						data.forEach(i => {
							if (i.uuid === uuid ) {
								i.app_upload_pic = value
							}
						})
						this.setState({ img: $fn.getImagePrefix(value) })
					}
					this.setState({data: $fn.copy(data)})
				})
				
			}, { param:{ modular: 110, spec_code},isMsg:false }),
			// 删除
			TableControls.del.call(this, {  param:{spec_code}, api: 'specimen/cancelAddSpecimen', refresh:false, onOk:()=>{
			// 请求删除接口成功后 删除
			const { data } = this.state
				let d = data.filter(i => i.uuid !== uuid)
				this.setState({ data: d, img: '' })
			}})
		]
	}

	render(){
		return (
			<>
				{/* 表格 */}
				<div className='fv ml10' style={{width:400, height:403}}>
					{ Table.call(this, { hasBottom:false }) }
				</div>
				{/* 图片 */}
				<Image className='ex' height={403} src={this.state.img} />
			</>
		)
	}
}

export default Index